<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inpt_1,.inpt_3,.inpt_4{
            width: 50px;
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            text-align: center;
        }
        .inpt_2{
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            text-align: center;
        }
        .inpt_4{
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 2.计算两个文本框的加减乘除 文本框 + 文本框 按钮（=） 文本框（结果） 提示：可以通过 input.value = "值" 来设置 input里的值。 -->
    <!-- 第一个数 -->
    <input class="inpt_1" type="text">
     <!-- 加减乘除 -->
    <input class="inpt_2" type="text">
     <!-- 第一个数 -->
     <input class="inpt_3" type="text">
     <button class="btn">=</button>
     <!-- 结果 -->
     <input class="inpt_4" type="text">   
     <script>
        var oneN=document.getElementsByClassName("inpt_1")[0];
        var twoN=document.getElementsByClassName("inpt_2")[0];
        var threeN=document.getElementsByClassName("inpt_3")[0];
        var bt=document.getElementsByClassName("btn")[0];
        var rlt=document.getElementsByClassName("inpt_4")[0];
        // bt.onclick=function(){
        //     var a=oneN.value;
        //         b=twoN.value;
        //         c=threeN.value;
        //         result=rlt.value;
        //         if(b=="+") { 
        //            rlt.value=(Number(oneN.value)+Number(threeN.value));
        //         }else if(b=="-") {
        //            rlt.value=(Number(oneN.value)-Number(threeN.value)); 
        //         }else if(b=="/") {
        //             rlt.value=(Number(oneN.value)/Number(threeN.value));       
        //         }else if(b=="*"){
        //             rlt.value=(Number(oneN.value)*Number(threeN.value));     
        //         }else if(b=="%"){
        //             rlt.value=(Number(oneN.value)%Number(threeN.value));     
        //         }                   
        // }
        bt.onclick=function(){
                if(twoN.value=="+") { 
                   rlt.value=(Number(oneN.value)+Number(threeN.value));
                }
                else if(twoN.value=="-") {
                   rlt.value=(Number(oneN.value)-Number(threeN.value)); 
                   console.log(oneN.value-threeN.value);
                }
                else if(twoN.value=="/") {
                    rlt.value=(Number(oneN.value)/Number(threeN.value));       
                }else if(twoN.value=="*"){
                    rlt.value=(Number(oneN.value)*Number(threeN.value));     
                }else if(twoN.value=="%"){
                    rlt.value=(Number(oneN.value)%Number(threeN.value));     
                } 
            }                  
     </script>
</body>
</html>